<template>
    <div class="wrap">
        <div class="searchinput">
            <slot name="left"></slot>
            <slot name="center">
                <div class="center iconfont icon-sousuo icon-delete">
                    <input type="text" :placeholder="item.show_name" v-model='value' @input="input" @keyup.enter='enter'>
                    <router-link to='/search'><span class="iconfont icon-delete" @click="value=''"></span></router-link>
                </div>
            </slot>
            <slot name="right">
                <router-link :to='{path:"/"}'>
                    <div class="cancel">取消</div>
                </router-link>
            </slot>
        </div>
        
    </div>
</template>
    
<script>
export default {
    data(){
        return {
            show:false,
        }
    },
    methods:{
        input(){
            this.$emit('input',this.value==''?this.item.show_name:this.value)
        },
        enter(){
            this.$emit('enter',this.value==''?this.item.show_name:this.value)
        }
    },
    props:[
        'item',
        'value'
    ],
    watch:{
    }
}
</script>

<style lang='less' scoped>
@import "../../assets/css/common";
@import "../../assets/css/iconfont";
.searchinput{
    display: flex;
    color: #999;
    background-color: #fff;
    padding: 0.7rem 1rem;
    line-height: 2.5rem;
    height: 2.5rem;
    .center{
        background-color: #f4f4f4;
        flex: 1;
        display: flex;
        border-radius: 0.2rem;
        &::before{
            font-size: 1.5rem;
            margin: 0 0.6rem 0 1rem;
        }
        span{
            padding-right:1rem ;
            &::before{
                font-size: 1.2rem;
            }
        }
        input{
            outline: none;
            flex:1;
            margin-top: 0.25rem;
            border:0;
            font-size: 1.08rem;
            color: #333;
            background-color: #f4f4f4;
        }
    }
    .cancel{
        color: @color;
        font-size: 1.25rem;
        margin:0.1rem 0 0 1rem;
    }
}

</style>